<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="/src/mobilebone.css">
    <script src="/src/mobilebone.js"></script>
    <style>
        #box{
            position: relative;
            width:300px;
            height:300px;
            border:1px solid #ddd;
            overflow: hidden;
        }
        .active{
            background:#f40;
            color:#fff;
            border:1px solid #ff0;
        }
    </style>
</head>
<body>
    <!-- <a href="t1.html">T-01</a> -->
    <div id="box">
        <div class="page out" id="page1" data-onpagefirstinto="onpagefirstinto" data-callback="callback" data-fallback="fallback" data-animationstart="animationstart">
            <h1>Page - 01</h1>
            <ul>
                <li>page 1</li>
                <li>page 1</li>
                <li>page 1</li>
            </ul>
        </div>
        <div class="page out" id="page2" >
            <h1>Page - 02</h1>
            <p>page 2 Content ...</p>
        </div>
        <div class="page out" id="page3" >
            <h1>Pgae - 03</h1>
            <button>Button</button>
        </div>
    </div>
    <a href="http://res123.leju.com/my/normal.html">normal</a>
    <!-- <a class="spa" href="#page1">page1</a>
    <a class="spa" href="#page2">page2</a>
    <a class="spa" href="#page3">page3</a> -->
    <div id="btn-group">
        <button class="active">page1</button>
        <button>page2</button>
        <button>page3</button>
    </div>

    <div id="createPage">
        <div class="sec"></div>
        <button>createPage</button>
    </div>
</body>
</html>
<script>
    //全局设置
    Mobilebone.captureLink = false;//启用a的匹配
    Mobilebone.pushStateEnabled = false;//启用历史记录

    // let aBtn = document.querySelectorAll('.spa');
    let aSpa = document.querySelectorAll('#box .page');
    let aBtn = document.querySelectorAll('#btn-group button');

    aBtn.forEach((obj)=>{
        console.log(obj)
        obj.dataset.ajax = true;
        obj.dataset.rel = 'auto';
    });


    let pre = 0;
    // let timer = null;
    aBtn.forEach((btn,index)=>{
        (function(index){
            btn.addEventListener('click',function(){
                fn.call(this,index)
            },false)
        })(index);
    });
    // let index = pre;
    // timer = setInterval(()=>{
    //     fn(++index%3);
    // },1000)
    function fn(index){
        console.log(pre,index)
        aBtn.forEach(btn=>{
            btn.classList.remove('active');
        });
        this.classList.add('active');
        Mobilebone.transition(aSpa[index],pre < 0 ? null:aSpa[pre],index>pre?false:true,{
            // history:true
        });
        pre = index;
    }

    let oCreatePage = document.querySelector('#createPage');
    let oCbtn = oCreatePage.querySelector('button');
    let oCcontent = oCreatePage.querySelector('.sec');
    console.log(oCcontent)
    oCbtn.addEventListener('click',function(){
        // let dom = `<div style="background:#ccc;color:#fff;"><h1>生成的页面</h1></div>`;
        // let el = oCcontent;
        // let options = {
        //     title:'新生成的',
        //     container:oCcontent
        // };
        // Mobilebone.createPage(dom,options);
        document.querySelectorAll('.page').forEach(page=>{
            Mobilebone.remove(page);
        })
    },false);

    function onpagefirstinto(pageInto,pageOut,options) {
        console.log('onpagefirstinto',pageInto,pageOut,options)
    }
    function callback(pageInto,pageOut,options) {
        console.log('callback',pageInto,pageOut,options)
    }
    function fallback(pageInto,pageOut,options) {
        console.log('fallback',pageInto,pageOut,options)
    }
    function animationstart(pageInto,into_or_out,options) {
        console.log('animationstart',pageInto,into_or_out,options)
    }
</script>
